<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :md="16">
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>项目基础信息</span>
            <div class="float-right">
              <el-button
                type="primary"
                @click="
                  $router.push('/bidding/evaluation_hall_supplier_follow')
                "
                plain
                >跟标</el-button
              >
              <el-button
                @click="$router.push('/bidding/evaluation_hall_supplier_enter')"
                type="primary"
                plain
                size="small"
                >报价/再次报价
              </el-button>
            </div>
          </div>

          <el-form :model="form" label-width="100px">
            <el-row :gutter="12">
              <el-col :md="12">
                <el-form-item label="招标名称">{{ form.title }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标编号">{{ form.code }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="采购单位">{{ form.company }}</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标方式">{{ form.way }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>在线沟通</span>
          </div>
          <ul class="list mb-20" style="list-style-type: none; padding: 0">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">供应商1：在线沟通{{ 1 }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
          <el-input
            type="textarea"
            v-model="message"
            :rows="4"
            placeholder="回车发送信息"
          ></el-input>
        </el-card>
      </el-col>
      <el-col :md="8">
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>评标流程记录</span>
          </div>
          <div style="height: 200px">
            <el-steps direction="vertical" :active="1">
              <el-step
                title="签到"
                description="确认签到   2020-12-12  12:00:00"
              ></el-step>
              <el-step title="供应商报价">
                <!-- <template slot="title">
                  <router-link to="/bidding/evaluation_hall">
                    评标
                  </router-link>
                </template> -->
              </el-step>
              <el-step title="拟定结果">
                <!-- <template slot="title">
                  <router-link to="/bidding/evaluation_result">
                    拟定结果
                  </router-link>
                </template> -->
              </el-step>
            </el-steps>
          </div>
        </el-card>

        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>澄清/答疑公告</span>
            <el-button type="primary" plain class="float-right" size="small"
              >澄清/答疑
            </el-button>
          </div>
          <ul class="list">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">澄清名称{{ i }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :title="notice_title"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div v-show="notice == 1">
        <h1 class="text-center">招标公告</h1>
        <div>
          <h3>xxxxxxxxxx公司</h3>
          <p style="line-height: 24px">
            <span style="padding-left: 30px"></span>
            在我公司组织的XXXXXXXXXXX项目所需的管件招标中（招标编号：ZZLM20201208A/B/C-1750-111-01)，经评标委员会评审，确定贵公司为中标人。
            中标货物管件请你公司依据中标通知书尽快与XXXXXXXXX公司签订合同。
          </p>
        </div>
      </div>
      <div class="bid-con mb-20" v-show="notice == 2 || notice == 3">
        <div class="bid-icon-con">
          <template v-if="notice == 2">
            <img
              class="bid-icon"
              v-if="notice == 2"
              src="@/assets/bid.png"
              alt=""
            />
            <span>已中标</span>
          </template>
          <template v-if="notice == 3">
            <img class="bid-icon" src="@/assets/bid-cancel.png" alt="" />
            <span>已流标</span>
          </template>
        </div>
        <el-form :model="form1" label-width="120px">
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item label="招标名称">招标名称</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名截止时间"
                >2020-03-01 14:59:59
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招标编号">XJD-998376241 </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投标截止时间"
                >2020-03-01 14:59:59
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采购单位"
                >北京国电龙源环保工程有限公司
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开标开始时间"
                >2020-03-01 14:59:59
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招标方式">公开招标</el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <el-steps :active="5" simple>
          <el-step title="招标"></el-step>
          <el-step title="投标"></el-step>
          <el-step title="开标"></el-step>
          <el-step title="评标"></el-step>
          <el-step title="定标"></el-step>
          <el-step title="公示"></el-step>
        </el-steps>
      </div>
      <el-table
        :data="lists"
        border
        highlight-current-row
        class="mb-20"
        v-if="notice == 1 || notice == 2"
      >
        <el-table-column label="物料名称" prop="name"></el-table-column>
        <el-table-column label="采购数量" prop="num"></el-table-column>
        <el-table-column label="中标数量" prop="num1"></el-table-column>
        <el-table-column label="含税单价" prop="price"></el-table-column>
        <el-table-column label="含税小价" prop="price1"></el-table-column>
      </el-table>
      <div class="text-right" v-show="notice == 1">
        <span style="margin-right: 15px; font-size: 15px">叮当电商</span>
        <small>2020-12-12</small>
      </div>
      <div class="text-center" v-if="notice == 3">
        <h3>已结束</h3>
        <p>2020-12-12 14:45:46</p>
      </div>
      <div slot="footer" class="dialog-footer text-center">
        <el-button type="primary" @click="handleClose" size="large"
          >关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "招标名称",
        code: "XJD-998376241",
        company: "叮当（天津）电子商务有限公司",
        way: "公开招标",
      },
      lists: [
        {
          name: "物料A",
          num: 3000,
          num1: 1000,
          price: 1000.0,
          price1: 1000.0,
        },
        {
          name: "物料B",
          num: 5000,
          num1: 1000,
          price: 1000.0,
          price1: 1000.0,
        },
        {
          name: "物料C",
          num: 4000,
          num1: 1000,
          price: 1000.0,
          price1: 1000.0,
        },
      ],
      opinion: "",
      message: "",
      notice: 1,
      notice_title: "",
      dialogVisible: false,
      form1: {},
    };
  },
  methods: {
    handleClose(done) {
      try {
        done();
      } catch (error) {}
      this.dialogVisible = false;
      setTimeout(() => {
        if (this.notice < 3) {
          this.notice++;
          if (this.notice == 1) {
            this.notice_title = "结果通知书详情";
          }
          if (this.notice == 2 || this.notice == 3) {
            this.notice_title = "定标审核";
          }
          this.dialogVisible = true;
        }
      }, 500);
    },
  },
  created() {
    const ad = this.$route.query.ad;
    if (ad) {
      this.notice = ad;
      if (ad == 1) {
        this.notice_title = "结果通知书详情";
      }
      if (ad == 2 || ad == 3) {
        this.notice_title = "定标审核";
      }
      this.dialogVisible = true;
    }
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #e3e3e3;
  min-height: 100vh;
}
.bid-con {
  position: relative;
  .bid-icon-con {
    position: absolute;
    width: 120px;
    height: 120px;
    right: 0;
    top: -20px;
    text-align: center;
    color: #d81e06;
    font-weight: bold;
    font-size: 15px;
    .bid-icon {
      max-width: 100%;
    }
  }
}
</style>
